<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <text class="navbar-title">车间员工列表</text>
    </view>
    
    <!-- 可滚动员工列表 -->
    <scroll-view class="employee-list" scroll-y>
      <view
        v-for="(worker, index) in workers"
        :key="index"
        class="employee-item"
        @click="goDetail(worker)"
      >
        <!-- 员工头部：头像与姓名 -->
        <view class="employee-header">
          <image
            class="employee-photo"
            :src="worker.employeePhoto || '/static/images/default.png'"
          />
          <text class="employee-name">{{ worker.workName }}</text>
        </view>
        <!-- 员工详情 -->
        <view class="employee-info">
          <text class="employee-detail">性别：{{ getGender(worker.gender) }}</text>
          <text class="employee-detail">电话：{{ worker.phone }}</text>
          <text class="employee-detail">地址：{{ worker.address }}</text>
          <!-- 如果返回数据中包含车间名称 -->
          <text class="employee-detail" v-if="worker.workshopName">
            车间：{{ worker.workshopName }}
          </text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      workers: [],
      currentWorkshopId: null // 存储当前车间ID
    };
  },
  onLoad(options) {
    // 如果从上一个页面传入了 workshopId 参数，则赋值给 currentWorkshopId
    // 获取传递过来的 workshopId 参数
    if (options.workshopId) {
      this.currentWorkshopId = options.workshopId;
    }
	this.fetchWorkers();
  },
  methods: {
    // 调用接口获取员工信息，支持传递 workshopId 参数
    fetchWorkers() {
      uni.request({
        url: 'http://localhost:1001/worker/findAllWorker',
        method: 'GET',
        data: {
          workshopId: this.currentWorkshopId  // 通过参数传递车间ID（其他查询参数也可按需传入）
        },
        success: (res) => {
          if (res.data && res.data.code === 200) {
            // 假设返回的数据是一个员工对象数组
            this.workers = res.data.data;
          } else {
            uni.showToast({
              title: res.data.msg || '获取员工信息失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('请求失败：', err);
          uni.showToast({
            title: '网络错误',
            icon: 'none'
          });
        }
      });
    },
    // 性别转换函数，假设1为男，2为女
    getGender(gender) {
      return gender == 1 ? '男' : gender == 2 ? '女' : '未知';
    },
    // 点击员工项，跳转到员工详情页面（详情页面路径根据实际情况调整）
    goDetail(worker) {
      uni.navigateTo({
        url: `/pages/workerDetail/workerDetail?id=${worker.id}`
      });
    }
  }
};
</script>

<style scoped>
/* 整体容器 */
.container {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  height: 100vh;
}

/* 顶部导航栏 */
.navbar {
  height: 60px;
  background-color: #1296db;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-title {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

/* 员工列表 */
.employee-list {
  flex: 1;
  padding: 10px 15px;
}

/* 每个员工项 */
.employee-item {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 头像和姓名 */
.employee-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.employee-photo {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin-right: 10px;
}
.employee-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* 其他详情 */
.employee-info {
  font-size: 14px;
  color: #666;
}
.employee-detail {
  margin-bottom: 4px;
}
</style>
